.widget {
  position: relative;

  .widget-zoom {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .widget-label {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0);
  }

  input.widget-input {
    position: absolute;
    left: -99999px;
  }

  .widget-mask {
    position: absolute;
    width: ~'calc(100% + 4px)';
    height: ~'calc(100% + 4px)';
    left: -2px;
    top: -2px;
    z-index: 100;
    border: 2px solid #623ceb;
    opacity: 0;
    display: none;
    box-shadow: 0px 0px 20px 0px rgba(98, 60, 235, 0.2);
    z-index: 1;
  }

  .widget-handle {
    position: absolute;
    right: -43px;
    top: 0;
    width: 36px;
    height: 143px;
    background: #623ceb;
    border-radius: 4px;

    .widget-handle-item {
      width: 36px;
      height: 35.75px;
      line-height: 35.75px;
      text-align: center;

      i {
        font-size: 20px;
        color: #ffffff;
      }
    }

    .widget-handle-item.disabled {
      i {
        color: #9176f1;
      }
    }
  }

  input.widget-input:checked + .widget-mask {
    opacity: 1;
    display: block;
    z-index: 2;
  }
}
